<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="error" @click="batchDelete"> 批量删除 </a-button>
        <ImpExcel @success="loadDataSuccess">
          <a-button> 导入 </a-button>
        </ImpExcel>
        <a-button @click="handleExport"> 导出 </a-button>
        <a-button type="primary" @click="handleCreate"> 新增顾客 </a-button>
      </template>
      <template #customerImg="{ record }">
        <TableImg :img-list="[record.profilePicture]" size="70" style="padding: 10px" />
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              tooltip: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <CustomerModel @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { columns, searchFormSchema } from './customer.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Api, deleteCustomer, getCustomerByPage } from '/@/api/plm/customer/customer';
  import CustomerModel from './CustomerModel.vue';
  import _default from 'ant-design-vue/es/color-picker';
  import { getColumns, getFields, getFormSchemas } from '/@/utils/permission/permission';
  const compState = reactive({
    absolute: false,
    loading: false,
    tip: '导出中...',
  });
  import { ImpExcel } from '/@/components/Excel';
  import { exportList } from '/@/api/plm/customer/customer';
  import { reactive } from 'vue';
  getColumns(columns, getFields(Api.GetCustomerByPage));
  getFormSchemas(searchFormSchema, getFields(Api.GetCustomerByPage));

  // 初始化弹出模块
  const [registerModal, { openModal }] = useModal();
  // 消息提示
  const { createMessage } = useMessage();
  // 初始化表格
  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, getForm }] = useTable({
    title: '行业列表',
    api: getCustomerByPage,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
    rowSelection: {
      type: 'checkbox',
      columnWidth: 50,
    },
  });
  function handleCreate() {
    openModal(true, {
      isUpdate: false,
    });
  }
  function handleEdit(record: Recordable) {
    record.id = record.id + '';
    console.log('record', record);
    openModal(true, {
      record,
      isUpdate: true,
    });
  }
  async function handleDelete(record: Recordable) {
    console.log('删除的信息：' + record);
    let params: Array<string> = [];
    params.push(record.customerId);
    const data = await deleteCustomer(params);
    if (data.code === 200) {
      createMessage.success(data.message);
    } else {
      createMessage.error(data.message);
    }
    await reload();
  }
  function handleSuccess() {
    reload();
  }
  // 批量删除
  async function batchDelete() {
    let params: Array<string> = [];
    console.log(getSelectRows());
    for (let _item of getSelectRows()) {
      params.push(_item.customerId);
    }
    let data;
    if (params.length > 0) {
      data = await deleteCustomer(params);
    } else {
      createMessage.warning('请至少选择一条记录');
    }
    if (data.code === 200) {
      createMessage.success(data.message);
      // 清空选择行
      clearSelectedRowKeys();
    } else {
      createMessage.error(data.message);
    }
    await reload();
  }

  async function handleExport() {
    compState.loading = true;
    const form = getForm();
    const params = form.getFieldsValue();
    const data = await exportList(params);
    console.log('data', data);
    const blob = new Blob([data.data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
    });
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    // 配置下载的文件名
    link.download = 'test.xlsx';
    compState.loading = false;
    link.click();
    // table2excel(data.columns, data.exportList, '产品信息列表');
    // compState.loading = false;
  }
</script>
